<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Fashionist--shop list</title>
    <script src="js/jquery-1.11.1.min.js"></script>
    <link rel="Shortcut Icon" href="images/favicon.ico">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/about.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/shop_list.css">
    <link rel="stylesheet" href="css/animate.css">
    <script src="js/index.js"></script>
</head>
<body class="shop_list">
    <div class="head clear">
        <div class="head_wrap">
            <div class="logo">
                <a href="#"><img src="images/logo.png" alt="网站logo"></a>
            </div>
            <ul class="nav_item">
                <li><a href="index.html">HOME</a></li>
                <li><a class="nav_more_item" href="#">PAGES</a>
                    <ul class="second_nav">
                        <li><a href="product.html">PRODUCT LIST</a></li>
                        <li><a href="product.html">PRODUCT LIST</a></li>
                        <li><a href="product.html">PRODUCT LIST</a></li>
                        <li><a href="product.html">PRODUCT LIST</a></li>
                    </ul>
                </li>
                <li>
                    <a class="nav_more_item" href="shop_list.html">SHOP</a>
                    <ul class="second_nav">
                        <li><a href="#">men's wear</a></li>
                        <li><a href="#">women's wear</a></li>
                        <li><a href="#">men's wear</a></li>
                        <li><a href="#">men's wear</a></li>
                        <li><a href="#">men's wear</a></li>
                        <li><a href="#">men's wear</a></li>
                    </ul>
                </li>
                <li>
                    <a class="nav_more_item" href="about.html">about</a>
                    <ul class="second_nav">
                        <li><a href="#">men's wear</a></li>
                        <li><a href="#">women's wear</a></li>
                        <li><a href="#">men's wear</a></li>
                        <li><a href="#">men's wear</a></li>
                        <li><a href="#">men's wear</a></li>
                        <li><a href="#">men's wear</a></li>
                    </ul>
                </li>
                <li><a href="blog_single.html">BLOG</a></li>
                <li><a href="contact_us.html">CONTACT</a></li>
            </ul>
            <div class="search_wrap">
                <form>
                    <input type="text" placeholder="Please input..." name="commit">
                    <button type="submit"></button>
                </form>
            </div>
        </div>
    </div>
    <!-- 控制二级菜单显示的js代码 -->
    <script>
        $(document).ready(
            function(){
                $(".nav_item li").hover(function(){
                    $(this).find(".second_nav").stop().slideDown();
                    },function(){
                    $(this).find(".second_nav").stop().slideUp();
                });
            }
        );
    </script>
    <!-- head结束 -->
    <div class="nav_title_wrap">
        <div class="nav_title">
            <a href="index.html">Home&nbsp;&nbsp;&nbsp;&#8250;</a>&nbsp;&nbsp;&nbsp;Shop List
        </div>
    </div>
    <!-- 内页小导航布局结束 -->
    <div class="shop_banner">
        <!-- Swiper -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="banner_txt animated fadeIn">
                        <h3>Summer Style Collection</h3>
                        <span>DRESSES&#38;CLOTHING</span>
                    </div>
                    <img src="images/shop_banner_01.jpg">
                </div>
                <div class="swiper-slide"><img src="images/shop_banner_02.jpg">
                    <div class="banner_txt animated fadeIn">
                        <h3>Summer Style Collection</h3>
                        <span>DRESSES&#38;CLOTHING</span>
                    </div>
                </div>
                <div class="swiper-slide">
                    <img src="images/shop_banner_01.jpg">
                    <div class="banner_txt animated fadeIn">
                        <h3>Summer Style Collection</h3>
                        <span>DRESSES&#38;CLOTHING</span>
                    </div>
                </div>
                <div class="swiper-slide">
                    <img src="images/shop_banner_02.jpg">
                    <div class="banner_txt animated fadeIn">
                        <h3>Summer Style Collection</h3>
                        <span>DRESSES&#38;CLOTHING</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- Swiper JS -->
        <script src="js/swiper.min.js"></script>
          <!-- Initialize Swiper -->
        <script>
             var swiper = new Swiper('.swiper-container', {
                loop: true,
                effect: 'fade',
                autoplay: {
                    delay: 2500,
                    disableOnInteraction: false,
                }
            });
        </script>
    </div>
    <div class="list_top clear">
        <div class="list_top_left">Showing 1-8 from 124 products</div>
        <div class="list_top_right">
            <a href="javascript:void(0)" class="list_btn_01"></a>
            <a href="javascript:void(0)" class="list_btn_02"></a>
            <a href="javascript:void(0)" class="list_btn_03"></a>
        </div>
    </div>
    <!-- 商品列表开始 -->
    <div class="shop_content clear">
        <ul>
                <li>
                    <a href="#">
                        <img src="images/shop_pic_01.jpg">
                        <div class="shop_more">
                            <i>Striped Shirt Men</i>
                            <span>$ 79,00</span>
                            <b>&#xe626;</b>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/shop_pic_02.jpg">
                        <div class="shop_more">
                            <i>Striped Shirt Men</i>
                            <span>$ 79,00</span>
                            <b>&#xe626;</b>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/shop_pic_03.jpg">
                        <div class="shop_more">
                            <i>Striped Shirt Men</i>
                            <span>$ 79,00</span>
                            <b>&#xe626;</b>
                        </div>
                    </a>
                </li>
                <li class="m_right">
                    <a href="#">
                        <img src="images/shop_pic_04.jpg">
                        <div class="shop_more">
                            <i>Striped Shirt Men</i>
                            <span>$ 79,00</span>
                            <b>&#xe626;</b>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/shop_pic_01.jpg">
                        <div class="shop_more">
                            <i>Striped Shirt Men</i>
                            <span>$ 79,00</span>
                            <b>&#xe626;</b>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/shop_pic_02.jpg">
                        <div class="shop_more">
                            <i>Striped Shirt Men</i>
                            <span>$ 79,00</span>
                            <b>&#xe626;</b>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/shop_pic_03.jpg">
                        <div class="shop_more">
                            <i>Striped Shirt Men</i>
                            <span>$ 79,00</span>
                            <b>&#xe626;</b>
                        </div>
                    </a>
                </li>
                <li class="m_right">
                    <a href="#">
                        <img src="images/shop_pic_04.jpg">
                        <div class="shop_more">
                            <i>Striped Shirt Men</i>
                            <span>$ 79,00</span>
                            <b>&#xe626;</b>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/shop_pic_01.jpg">
                        <div class="shop_more">
                            <i>Striped Shirt Men</i>
                            <span>$ 79,00</span>
                            <b>&#xe626;</b>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/shop_pic_02.jpg">
                        <div class="shop_more">
                            <i>Striped Shirt Men</i>
                            <span>$ 79,00</span>
                            <b>&#xe626;</b>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/shop_pic_03.jpg">
                        <div class="shop_more">
                            <i>Striped Shirt Men</i>
                            <span>$ 79,00</span>
                            <b>&#xe626;</b>
                        </div>
                    </a>
                </li>
                <li class="m_right">
                    <a href="#">
                        <img src="images/shop_pic_04.jpg">
                        <div class="shop_more">
                            <i>Striped Shirt Men</i>
                            <span>$ 79,00</span>
                            <b>&#xe626;</b>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/shop_pic_01.jpg">
                        <div class="shop_more">
                            <i>Striped Shirt Men</i>
                            <span>$ 79,00</span>
                            <b>&#xe626;</b>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/shop_pic_02.jpg">
                        <div class="shop_more">
                            <i>Striped Shirt Men</i>
                            <span>$ 79,00</span>
                            <b>&#xe626;</b>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/shop_pic_03.jpg">
                        <div class="shop_more">
                            <i>Striped Shirt Men</i>
                            <span>$ 79,00</span>
                            <b>&#xe626;</b>
                        </div>
                    </a>
                </li>
                <li class="m_right">
                    <a href="#">
                        <img src="images/shop_pic_04.jpg">
                        <div class="shop_more">
                            <i>Striped Shirt Men</i>
                            <span>$ 79,00</span>
                            <b>&#xe626;</b>
                        </div>
                    </a>
                </li>
        </ul>
    </div>
    <!-- 商品列表结束 -->
    <!-- footer开始 -->
    <div class="footer clear">
        <div class="footer_top">
            <div class="footer_left">
                <a href="#"><img src="images/logo.png" alt="logo"></a>
                <p class="describe"> 
                    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
                </p>
                <p class="footer_share clear">
                    <i>&#xe624;</i>
                    <a href="#">TWITTER</a>
                    <i>&#xe79d;</i>
                    <a href="#">FACEBOOK</a>
                    <i>&#xe625;</i>
                    <a href="#">INSTAGRAM</a>
                    <i>&#xe619;</i>
                    <a href="#">PINTEREST</a>
                </p>
            </div>
            <div class="footer_right clear">
                <ul>
                    <li>
                        <a href="#">ABOUT US</a>
                        <span>About Fashionist </span>
                        <span>Careers</span>
                        <span>Journal</span>
                        <span>Investor Relations</span>
                        <span>Our Stores</span>
                    </li>
                    <li>
                        <a href="#">INFORMATION</a>
                        <span>Refund</span>
                        <span>Policy for Buyer</span>
                        <span>Shipping</span>
                        <span>E-Commerce</span>
                        <span>Site map</span>
                    </li>
                    <li>
                        <a href="#">HELP CENTER</a>
                        <span>My Account</span>
                        <span>Delivery</span>
                        <span>Find a store</span>
                        <span>Contact Us</span>
                        <span>FAQs</span>
                    </li>
                    <li>
                        <a href="#">COMPANY</a>
                        <span>Return Policy</span>
                        <span>Privacy Policy</span>
                        <span>Product Warranty</span>
                        <span>Forum</span>
                        <span>Order Tracking</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="copyright">
            <span>© 2016 by Fashionist| All rights reserved</span>
            <i>
                <img src="images/pay_01.jpg" alt="支付方式1">
                <img src="images/pay_02.jpg" alt="支付方式2">
                <img src="images/pay_03.jpg" alt="支付方式3">
                <img src="images/pay_04.jpg" alt="支付方式4">
                <img src="images/pay_05.jpg" alt="支付方式5">
            </i>
        </div>
    </div>
    <!-- footer结束 -->
</body>
</html>